<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import patientList from "@/mock/patientData"; // 导入真实病人数据
import CountUp from "@/components/count-up";

const duration = ref(2);
const state = reactive({
  ageUnder18: 0,    // 小于18岁
  age18to35: 0,     // 18-35岁
  age35to65: 0,     // 35-65岁
  ageOver65: 0,     // 65岁以上
  totalNum: 0,      // 患者总数
});

// 计算各年龄段患者数量
const calculateAgeGroups = () => {
  const ageGroups = {
    under18: 0,
    age18to35: 0,
    age35to65: 0,
    over65: 0
  };
  
  patientList.forEach(patient => {
    const age = patient.age;
    
    if (age < 18) {
      ageGroups.under18++;
    } else if (age >= 18 && age <= 35) {
      ageGroups.age18to35++;
    } else if (age > 35 && age <= 65) {
      ageGroups.age35to65++;
    } else {
      ageGroups.over65++;
    }
  });
  
  return ageGroups;
};

const getData = () => {
  try {
    const ageGroups = calculateAgeGroups();
    
    state.ageUnder18 = ageGroups.under18;
    state.age18to35 = ageGroups.age18to35;
    state.age35to65 = ageGroups.age35to65;
    state.ageOver65 = ageGroups.over65;
    state.totalNum = patientList.length;
    
    console.log("患者年龄段分布:", {
      总数: state.totalNum,
      小于18岁: state.ageUnder18,
      '18-35岁': state.age18to35,
      '35-65岁': state.age35to65,
      '65岁以上': state.ageOver65
    });
    
  } catch (err) {
    console.error("加载患者数据失败:", err);
  }
};

onMounted(() => {
  getData();
});
</script>

<template>
  <ul class="user_Overview flex">
    <li class="user_Overview-item" style="color: #00fdfa">
      <div class="user_Overview_nums allnum">
        <CountUp :endVal="state.ageUnder18" :duration="duration" />
      </div>
      <p>小于18</p>
    </li>
    <li class="user_Overview-item" style="color: #07f7a8">
      <div class="user_Overview_nums online">
        <CountUp :endVal="state.age18to35" :duration="duration" />
      </div>
      <p>18-35</p>
    </li>
    <li class="user_Overview-item" style="color: #e3b337">
      <div class="user_Overview_nums offline">
        <CountUp :endVal="state.age35to65" :duration="duration" />
      </div>
      <p>35-65</p>
    </li>
    <li class="user_Overview-item" style="color: #f5023d">
      <div class="user_Overview_nums laramnum">
        <CountUp :endVal="state.ageOver65" :duration="duration" />
      </div>
      <p>65以上</p>
    </li>
  </ul>
</template>

<style scoped lang="scss">
.user_Overview {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0;

  li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    list-style: none;

    p {
      text-align: center;
      height: 16px;
      font-size: 16px;
      margin-top: 10px;
      font-weight: bold;
    }

    .user_Overview_nums {
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 22px;
      font-weight: bold;
      margin: 20px auto;
      background-size: cover;
      background-position: center center;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }

      &.bgdonghua::before {
        animation: rotating 14s linear infinite;
      }
    }

    .allnum {
      &::before {
        background-image: url("@/assets/img/left_top_lan.png");
      }
    }

    .online {
      &::before {
        background-image: url("@/assets/img/left_top_lv.png");
      }
    }

    .offline {
      &::before {
        background-image: url("@/assets/img/left_top_huang.png");
      }
    }

    .laramnum {
      &::before {
        background-image: url("@/assets/img/left_top_hong.png");
      }
    }
  }
}

// 旋转动画
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 响应式调整
@media (max-width: 1400px) {
  .user_Overview {
    li {
      .user_Overview_nums {
        width: 80px;
        height: 80px;
        line-height: 80px;
        font-size: 18px;
        margin: 15px auto;
      }
      
      p {
        font-size: 14px;
      }
    }
  }
}
</style>